<!--
 * @Author: 周洋 1430536748@qq.com
 * @Date: 2024-08-10 13:08:32
 * @LastEditors: 周洋 1430536748@qq.com
 * @LastEditTime: 2024-08-19 21:15:46
 * @version: 1.2.5
 * @Description: 角色管理
-->
<script setup lang="ts">
import { InlineButtonSearch } from '@/components/Form';
import { TableColumn } from '@/components/Table';
import { DialogButton, PopoverCheckBoxButton, PopconfirmButton } from '@/components/Button';
import { DeleteButton, FormButton, DeleteBatchDelete } from '@/layout/Widgets';
import type { IFormItems, ITableColumns } from '@/types/index.d';
import { GeneralTitle } from '@/components/Title'
import { IconEnum } from '@/enum/index'

const formItems = computed<Array<IFormItems>>(() => {
    return [
        { mode: 'input', label: '角色名称', prop: 'name', width: '220px' },
        { mode: 'select', label: '状态', prop: 'name', width: '150px', options: [] },
    ]
});
const data = ref({
    name: ''
});


const dialogForm = computed<Array<IFormItems>>(() => {
    return [
        { span: 24, mode: 'input', label: '角色名称', prop: 'name', },
        { span: 24, mode: 'input', label: '状态', prop: 'name', },
        { span: 24, mode: 'input', label: '角色名称', prop: 'name', },
        { span: 24, mode: 'input', label: '状态', prop: 'name', },
        { span: 24, mode: 'input', label: '角色名称', prop: 'name', },
        { span: 24, mode: 'input', label: '状态', prop: 'name', },
    ]
});


const columns = ref<Array<ITableColumns>>([
    {
        mode: 'selection',
        label: 'ID',
        prop: 'id',
        width: 55,
        show: true
    },
    {
        mode: 'column',
        label: '角色名称',
        prop: 'name',
        show: true
    },
    {
        mode: 'column',
        label: '角色编码',
        prop: 'code',
        show: true
    },
    {
        mode: 'button',
        label: '操作',
        prop: 'op',
        show: true,
        operator: [
            {
                title: '删除', type: 'info',
                render(row: any) {
                    return h(
                        FormButton,
                        {
                            edit: true,
                            items: [
                                { span: 24, mode: 'input', label: '角色名称', prop: 'name', },
                                { span: 24, mode: 'input', label: '状态', prop: 'name', },
                                { span: 24, mode: 'input', label: '角色名称', prop: 'name', },
                                { span: 24, mode: 'input', label: '状态', prop: 'name', },
                                { span: 24, mode: 'input', label: '角色名称', prop: 'name', },
                                { span: 24, mode: 'input', label: '状态', prop: 'name', },
                            ],
                            data: data
                        }
                    )
                }
            },
            {
                title: '删除', type: 'info',
                render(row: any) {
                    return h(
                        DeleteButton,
                    )
                }
            },
        ]
    }
])

const constantsTable = computed(() => {
    return columns.value.filter(column => column.show);
});
const tableData = reactive([
    { id: 1, name: '章三', code: 'sys' },
    { id: 1, name: '章三', code: 'sys' }
])
const activeNames = ref(['1', '2'])




const inwardRef = ref<any>(null)
const onOk = async (data: any) => {
    const valid = await inwardRef.value.validateForm();
    console.log(valid);
}

</script>
<template>
    <el-collapse v-model="activeNames">
        <el-collapse-item name="1">
            <template #title>
                <GeneralTitle :text="$t(`title.main.search`)" :icon="IconEnum.SEARCH" :size="24" />
            </template>
            <InlineButtonSearch :FormItems="formItems" :data="data" customClass="InlineStyle" />
        </el-collapse-item>

        <el-collapse-item name="2">
            <template #title>
                <div class="flex flex-justify-between flex-items-center w-100%">
                    <GeneralTitle :text="$t(`title.main.table`)" :icon="IconEnum.TABLE" :size="24" />
                </div>
            </template>
            <div class="flex flex-justify-between flex-items-center w-100% p-b-2">
                <el-button-group>
                    <FormButton :items="dialogForm" :data="data" />
                    <DeleteBatchDelete :data="data" />
                </el-button-group>
                <PopoverCheckBoxButton :icon="IconEnum.TABLE_SETTING" :options="columns" link size="2em" />
            </div>
            <TableColumn :tableData="tableData" :tableColumns="constantsTable" :header-row="{ color: '#555' }" />
        </el-collapse-item>
    </el-collapse>

</template>
<style scoped lang="scss"></style>